<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>分类</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/shop.css" />
		<style>
			[v-clock]{display:none;}
		</style>
	</head>

	<body ontouchstart>
		<div class="ui-content" id="app">
			<div class="ui-search-bar" id="searchBar">
				<form class="ui-search-bar__form">
					<div class="ui-search-bar__box">
						<i class="iconfont icon-sousuo"></i>
						<input type="search" class="ui-search-bar__input" id="searchInput" placeholder="搜索" required/>
						<a href="javascript:" class="ui-icon-clear iconfont icon-close-copy" id="searchClear"></a>
					</div>
					<label class="ui-search-bar__label" id="searchText">
                <i class="iconfont icon-sousuo"></i>
                <span>搜索</span>
            </label>
				</form>
				<a href="javascript:;" class="ui-search-bar__cancel-btn" id="searchCancel">取消</a>
			</div>
			<div class="category-main">
				<div class="c-sidebar" style="padding-bottom: 3rem;">
					<ul class="cate-nav">
						<div  v-for="o,i in fenLei">
                            <li  v-if="i == show" class="active" @click="switchType(i)">
                            	<a href="javascript:;">{{o.cat_name}}</a>
                            </li>
                            <li  v-else @click="switchType(i)">
                            	<a href="javascript:;">{{o.cat_name}}</a>
                            </li>
                        </div>
						
					</ul>
				</div>
				<div class="cate-scroll">
					<div v-for="o,i in fenLei">
                        <template v-if="i == show">
                            <div class="cate-cells" v-for="m in o.erji">
                                <div class="cate-title">{{m.cat_name}}</div>
                                <ul class="cate-goods">
                                    <li id="class1.html" v-for="n in m.sanji" @click="openGoodList(n.cat_id)" class="flei2">
                                        <a class="cate-gbox">
                                            <img :src="n.cat_img" onerror='this.src="../../images/error-img.png"' alt="">
                                            <div class="cate-tit">{{n.cat_name}}</div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </template>
                    </div>
				</div>
			</div>
		</div>

		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.js"></script>
		<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/vue.min.js"></script>
        <script src="../../js/common/config.js"></script>
		<!--搜索-->
		<script type="text/javascript">

            mui.init();
            mui.plusReady(function() {
                // vm.init();
            });
            
            var vm = new Vue({
                el:"#app",
                data:{
                    fenLei:[],
                    show:0,
                },
                methods:{
                    init(){
                        // 搜索设置
                        this.searchSet();
                        // 获取分类数据
                        this.getClassData();
                    },
                    // 获取分类数据
                    getClassData(){
                        var _that = this;
                        mui.ajax(Config.api.Type, {
                        	data: {
                        		request_type: 1,
                        		user_id: localStorage.getItem('user_id'),
                        	},
                        	type: 'post',
                        	dataType: 'json',
                        	success: function(data) {
                                _that.fenLei = data.data;
                        	},
                        	error: function(xhr, type, errorThrown) {
                        		console.log("接口错误");
                        	}
                        })
                    },
                    // 切换分类
                    switchType(i){
                        this.show = i;
                    },
					// 打开分类商品列表
					openGoodList(id){
						var url = "./class1.html";
						mui.openWindow({
						    url: url,
						    id: url,
						    styles: {
						        top: '0px', //新页面顶部位置
						        bottom: '0px', //新页面底部位置
						        popGesture: 'close'
						    },
						    extras: {
						        id: id
						    },
						    waiting: {
						        autoShow: false
						    }
						})
					},
                    // 搜索设置
                    searchSet(){
                        var $searchBar = $('#searchBar'),
                        	$searchText = $('#searchText'),
                        	$searchInput = $('#searchInput'),
                        	$searchClear = $('#searchClear'),
                        	$searchCancel = $('#searchCancel');
                        
                        function hideSearchResult() {
                        	$searchInput.val('');
                        }
                        
                        function cancelSearch() {
                        	hideSearchResult();
                        	$searchBar.removeClass('ui-search-bar_focusing');
                        	$searchText.show();
                        }
                        
                        $searchText.on('click', function() {
                        	$searchBar.addClass('ui-search-bar_focusing');
                        	$searchInput.focus();
                        });
                        $searchInput
                        	.on('blur', function() {
                        		if(!this.value.length) cancelSearch();
                        	});
                        $searchClear.on('click', function() {
                        	hideSearchResult();
                        	$searchInput.focus();
                        });
                        $searchCancel.on('click', function() {
                        	cancelSearch();
                        	$searchInput.blur();
                        });
                    },
                }
            });
			vm.init();
			mui(".ui-content").on("tap", ".flei2", function() {
				var url = this.getAttribute("id"); //getAttribute()获取属性函数
				mui.openWindow({
					url: url,
					id: url,
					styles: {
						top: '0px', //新页面顶部位置
						bottom: '0px', //新页面底部位置
						popGesture: 'close'
					},
					extras: {},
					waiting: {
						autoShow: false
					}
				})
			});
		</script>
	</body>

</html>